<style>
.lock-screen-wrapper{color:#fff;width:100%;height:100%;box-sizing:border-box;padding:50px 60px 0 60px;background-color:#000;background-image:url(/static/admin/img/bg-screen.jpg);background-repeat:no-repeat;background-size:cover;position:relative}
.lock-screen-time{font-size:88px}
.lock-screen-date{font-size:24px;padding:0 0 0 13px}
.lock-screen-form{position:absolute;left:0;right:0;top:65%;width:100%;text-align:center}
.lock-screen-psw{color:#fff;font-size:22px;width:0;height:0;line-height:40px;border-radius:40px;border:2px solid transparent;background-color:transparent;box-sizing:border-box;vertical-align:middle;-webkit-transition:all .3s;transition:all .3s;text-align:center}
.lock-screen-psw::-webkit-input-placeholder{color:#f6f6f6;font-size:16px}
.lock-screen-psw::-moz-placeholder{color:#f6f6f6;font-size:16px}
.lock-screen-psw::-ms-input-placeholder{color:#f6f6f6;font-size:16px}
.lock-screen-enter{width:65px;height:65px;line-height:1;font-size:28px;padding-top:18px;border:2px solid #fff;border-radius:50%;text-align:center;display:inline-block;box-sizing:border-box;vertical-align:middle;transition:all .3s;cursor:pointer}
.lock-screen-enter:hover{background-color:rgba(255,255,255,.3)}
.lock-screen-form.show-psw .lock-screen-psw{height:40px;width:180px;padding:0 5px;margin-right:10px;border-color:#fff;background-color:rgba(255,255,255,.3)}
.lock-screen-form.show-psw .lock-screen-enter{width:40px;height:40px;font-size:20px;padding-top:8px}
.lock-screen-form.show-back .lock-screen-enter:before{content:"\e603"}
.tip-box{width:230px;display:inline-block;text-align:left;margin-top:5px;}
.lock-screen-tip{color:red;width:180px;padding:0 3px;font-size:14px;text-align:center;box-sizing:border-box;display:none}
.lock-screen-form.show-psw .lock-screen-tip{display:inline-block}
.lock-screen-tool{width:20px;position:absolute;right:20px;bottom:20px}
.lock-screen-tool .lock-screen-tool-item{position:relative;width:20px;height:20px;line-height:20px;margin-top:15px;cursor:pointer}
.lock-screen-tool .lock-screen-tool-item:hover .layui-icon{color:#fff}
.lock-screen-tool .layui-icon{font-size:20px}
.lock-screen-tool .lock-screen-tool-item .lock-screen-tool-tip{position:absolute;top:50%;right:100%;height:24px;line-height:24px;width:60px;width:max-content;text-align:center;margin-right:10px;margin-top:-12px;font-size:12px;padding:0 8px;color:#eee;border-radius:3px;background-color:rgba(255,255,255,.3);word-break:break-all;display:none}
.lock-screen-tool .lock-screen-tool-item:hover .lock-screen-tool-tip{display:inline-block}
.lock-screen-tool .lock-screen-tool-item .lock-screen-tool-tip:before{content:"";border:4px solid transparent;border-left-color:rgba(255,255,255,.3);position:absolute;right:-8px;top:50%;margin-top:-4px}
</style>
<div class="lock-screen-wrapper">
    <div class="lock-screen-time"></div>
    <div class="lock-screen-date"></div>
    <form class="lock-screen-form" onsubmit="return false">
        <input placeholder="请输入解锁密码" class="lock-screen-psw" maxlength="20" type="password" autocomplete="off"/>
        <i class="layui-icon layui-icon-right lock-screen-enter"></i>
        <br/>
        <div class="tip-box"><div class="lock-screen-tip"></div></div>
    </form>
    <div class="lock-screen-tool">
        <div class="lock-screen-tool-item">
            <i class="layui-icon layui-icon-logout logout"></i>
            <div class="lock-screen-tool-tip">退出登录</div>
        </div>
    </div>
</div>
<script>
layui.use(function(){
    var map_root = layui.cache.maps;
    var $ = layui.jquery,util = layui.util,admin = layui.admin;
    // 获取各个组件
    var $form = $('.lock-screen-wrapper .lock-screen-form');
    var $psw = $form.find('.lock-screen-psw');
    var $tip = $form.find('.lock-screen-tip');
    var $time = $('.lock-screen-wrapper .lock-screen-time');
    var $date = $('.lock-screen-wrapper .lock-screen-date');
    //监听enter键
    $(window).keydown(function(event){
        if(admin.isLockScreen){
            if(event.keyCode === 13){
                doVer();
            }else if(event.keyCode === 8 && !$psw.val()){
                restForm();
                if(event.preventDefault) event.preventDefault();
                if(event.returnValue) event.returnValue = false;
            }
        }
    });
    //监听按钮点击
    $form.find('.lock-screen-enter').click(function(e){
        doVer(true);
    });
    //退出登录
    $('.logout').click(function(){
        restForm();
        admin.unlockScreen();
        location.href = map_root + 'login/logout';
    });
    //处理事件
    function doVer(emptyRest){
        if($form.hasClass('show-psw')){
            $psw.focus();
            var psw = $psw.val();
            if(psw){
                $.ajax({
                    type: "POST",
                    url: map_root + 'login/unlock',
                    data: {password:psw},
                    dataType: "json",
                    success:function(res){
                        if(res.code==1){
                            restForm();
                            admin.unlockScreen();
                        }else{
                            $psw.val('');
                            $tip.text(res.msg);
                            $form.addClass('show-back');
                        }
                    }
                });
            }else{
                emptyRest ? restForm() : $tip.text('请输入解锁密码');
            }
        }else{
            $form.addClass('show-psw show-back');
            $psw.focus();
        }
    }
    //重置
    function restForm(){
        $psw.blur();
        $psw.val('');
        $tip.text('');
        $form.removeClass('show-psw show-back');
    }
    //时间、日期
    function setDate(){
        var date = new Date();
        $time.text(util.toDateString(date, 'HH:mm'));
        var weeks = ['日', '一', '二', '三', '四', '五', '六'];
        $date.text(util.toDateString(date, 'MM月dd日，星期') + weeks[date.getDay()]);
    }
    setDate();
    setInterval(function(){if(admin.isLockScreen) setDate();},1000);
});
</script>